<template>
  <div>
    <el-card
      shadow="hover"
      v-for="(item, index) in blogGroupList"
      :key="'grouplist_' + index"
    >
      <template #header>
        <div class="card-header">
          <span>{{item.label}}</span>
          <span class="button"></span>
        </div>
      </template>
      <template v-for="(item, index) in item.children">
        <div v-if="isEdit"
          :key="'group_' + index"
          class="text item"
          style="cursor:pointer"
          @click="changeGroup(item.value)"
        >
          {{item.label}}
        </div>
        <router-link v-else :key="'group_' + index" :to="{ name: 'groups', params: { groupId:item.value} }">
          {{item.label}}<br>
        </router-link>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import dataListControl from '../control/data-list'
// 状态
import VueDS from 'vue-data-state'

// 组件的属性
const props = defineProps({
  isEdit: Boolean
})

/**
* 博文的分组列表
*/
const blogGroupList = reactive([
  {
    value: '1000',
    label: '前端',
    children: [
      {
        value: '1001',
        label: 'vue基础知识'
      },
      {
        value: '1002',
        label: 'vue组件'
      },
      {
        value: '1003',
        label: 'vue路由'
      }
    ]
  },
  {
    value: '2000',
    label: '后端',
    children: [
      {
        value: '2001',
        label: 'MySQL'
      },
      {
        value: '2002',
        label: 'web服务'
      }
    ]
  }
])

// 访问状态
const { get } = VueDS.useStore()
// 获取编辑博文的状态
const editBlogState = get.editBlogState()

// 编辑模式下，选择分组
const changeGroup = (id) => {
  editBlogState.groupId = id
}

</script>

<style>
  .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  .text {
    font-size: 14px;
  }

  .item {
    padding-left: 30px;
    margin-bottom: 18px;
  }

</style>
